<template>
  <view class="goods_list">
    <!-- 搜索框 -->
    <ugoSearch></ugoSearch>
    <!-- 2.0 tab栏 -->
    <u-tabs
      :current="current"
      :list="tabs"
      :scrollable="false"
      @click="click"
    ></u-tabs>
    <!-- 内容 -->
    <view v-if="current === 0">
      <navigator
        :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
        class="goods-item"
        v-for="item in goods"
        :key="item.goods_id"
      >
        <view class="goods-item-img">
          <image :src="item.goods_small_logo"></image>
        </view>
        <view class="goods-item-info">
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <view class="goods-price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <view v-else-if="current === 1"> 销量 </view>
    <view v-else-if="current === 2"> 价格 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      current: 0,
      // 商品列表
      goods: [],
      params: {
        // 否	string	关键字
        query: "",
        // 否	string	分类id
        cid: "",
        // 否	number	页码
        pagenum: 1,
        // 否	number	页容量
        pagesize: 10,
      },
      total: 0,
    };
  },
  async onLoad({ cid }) {
    this.params.cid = cid;
    this.getGoods();
  },
  //上拉加载
  onReachBottom() {
    if (this.goods.length >= this.total) {
      uni.showToast({
        title: "没有下一页了",
        icon: "none",
      });
      return;
    }
    this.params.pagenum++;
    this.getGoods();
  },
  //下拉刷新
  async onPullDownRefresh() {
    this.params.pagenum = 1;
    this.goods = [];
    await this.getGoods();
    uni.stopPullDownRefresh();
  },
  methods: {
    click({ index }) {
      //   console.log(index);
      this.current = index;
    },
    async getGoods() {
      const res = await uni.$u.http.get("/goods/search", {
        params: this.params,
      });
      console.log(73, res);
      this.goods = [...this.goods, ...res.message.goods];
      this.total = res.message.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.goods_list {
  padding-top: 84rpx;
}
.u-tabs__wrapper__nav__line {
  background-color: red !important;
}
.goods-item {
  display: flex;
  margin-top: 10rpx;
  .goods-item-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 192rpx;
      height: 191rpx;
      background-color: #ccc;
    }
  }

  .goods-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 28rpx;
    color: #666;
    flex: 2;
    .goods-name {
    }

    .goods-price {
      color: #eb4450;
    }
  }
}
</style>